<!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>HLS 播放器</title>
    <style>
      body {
        font-family: Arial;
        padding: 20px;
      }
      video {
        width: 100%;
        max-width: 800px;
      }
      button {
        padding: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <h1>HLS 播放器</h1>
    <button onclick="playVideo()">开始播放视频</button>
    <button onclick="setQualityLevel(-1)">自动质量</button>
    <button onclick="setQualityLevel(0)">低质量 (360p)</button>
    <button onclick="setQualityLevel(1)">中等质量 (480p)</button>
    <button onclick="setQualityLevel(2)">高质量 (720p)</button>

    <!-- 添加状态显示区域 -->
    <div
      id="status"
      style="
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 5px;
        background-color: #f0f0f0;
        border-radius: 5px;
      "
    >
      当前质量: 未选择
    </div>

    <!-- <video width="800" height="450" id="video" controls autoplay muted></video> -->
    <video width="800" height="450" id="video" controls autoplay></video>

    <script src="/js/hls.js"></script>
    <script>
      const playlistUrl = "/adaptive/input1/stream_640_360/index.m3u8"
      // const playlistUrl = "/adaptive/stream_854_480/index.m3u8"
      // const playlistUrl = "/adaptive/stream_1280_720/index.m3u8"
      const video = document.getElementById("video")
      const status = document.getElementById("status") // 假设有一个状态显示元素
      let hls

      // 初始化 HLS 播放器（添加自适应比特率配置）
      if (Hls.isSupported()) {
        hls = new Hls({
          // 启用自适应比特率算法
          startLevel: -1, // 自动选择初始级别
          abrEwmaDefaultEstimate: 1000000, // 默认带宽估计
          abrEwmaFastLive: 3.0, // 快速带宽估计
          abrEwmaSlowLive: 9.0, // 慢速带宽估计
          maxStarvationDelay: 4, // 最大饥饿延迟
          maxLoadingDelay: 4 // 最大加载延迟
          // debug: true // 调试信息（可以在控制台查看详细信息）
        })

        hls.attachMedia(video)

        // 监听事件
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          console.log(hls.levels)
          console.log("播放列表已解析，发现 " + hls.levels.length + " 种质量级别")
          video.play()
        })

        // 监听级别切换
        hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
          console.log(
            "切换到质量级别: " +
              data.level +
              " (" +
              hls.levels[data.level].width +
              "x" +
              hls.levels[data.level].height +
              ", " +
              Math.round(hls.levels[data.level].bitrate / 1000) +
              "kbps)"
          )

          if (status) {
            status.textContent =
              "当前质量: " +
              hls.levels[data.level].width +
              "x" +
              hls.levels[data.level].height +
              " (" +
              Math.round(hls.levels[data.level].bitrate / 1000) +
              "kbps)"
          }
        })
      }

      // 播放视频
      function playVideo() {
        if (hls) {
          hls.loadSource(playlistUrl)
        } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
          video.src = playlistUrl
        }
      }

      // 添加一个函数来设置质量级别
      function setQualityLevel(level) {
        hls.currentLevel = level // -1 自动, 0 最高, 1 中等, 2 最低
        console.log("设置质量级别为: " + level)
      }
    </script>
  </body>
</html>
